<template>
  <div class="login">
    <div class="login-box">
      <div style="margin: 20px 0;">welcome</div>
  <el-form
    ref="ruleForm"
    style="width: 100%;"
    :model="data.ruleFormRef"
    ：rules="data.rules">
      <el-form-item style="padding: 10px;" prop="username">
        <el-input placeholder="请输入账号" v-model="data.ruleFormRef.userName" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item style="padding: 10px;" prop="password">
        <el-input placeholder="请输入密码" v-model="data.ruleFormRef.password" prefix-icon="Lock"></el-input>
      </el-form-item>
    <div style="display: flex;justify-content: center;padding-bottom: 20px;margin-left: 10px;margin-right: 10px">
    <el-button type="primary" style="width: 100% ;" @click="doLogin">登录</el-button>
    </div>
  </el-form>
      </div>
  </div>

</template>

<script setup>
import{reactive,ref} from 'vue';
import {router} from "@/router/index.js";
const ruleFormRef = ref()
const data=reactive({
  ruleFormRef:{
    userName:'',
    password:'',
  },
  rules:{
    userName:[
      {required:true,message:"请输入账号",trigger:"blur"},
      {min:3,max:20,message: "不能少于三位",trigger:"blur"}
    ],
    password:[
      {required:true,message:"请输入账号",trigger:"blur"},
      {min:5,message: "不能少于五位",trigger:"blur"}
    ]
  }
})
const doLogin = () => {
    alert("后台已执行")
  router.push("/home")
}
</script>

<style scoped>
  .login {
    width: 100vw;
    height: 100vh;
    background-image: url("https://www.cqytxy.edu.cn/__local/A/E0/5F/3DA3234AE274AE29F295FC30247_33E80B37_71B85.jpg");
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .login-box{
    width: 30%;
    height: 30%;
    justify-content: center;
  }
</style>
<!--你好-->